<template>
	<view>
		<template v-if="detInfo != null">
			<view class="detImg">
				<image class="samePar" :src="detInfo.xlcsImg" mode="aspectFill"></image>
			</view>
			<view class="padd" style="padding-bottom: 30rpx;">
				<view class="cpTit">{{detInfo.title}}</view>
				<view class="scaleDet hasFlex">
					<view class="cpNum">
						<text class="iconfont icon-queNum"></text>
						<text>共{{detInfo.queNum}}题</text>
					</view>
					<view class="lineView"></view>
					<view class="cpNum">
						<text class="iconfont icon-yonghu"></text>
						<text>已测{{detInfo.comNum}}人</text>
					</view>
					<view class="lineView"></view>
					<view class="cpNum">
						<text class="iconfont icon-time"></text>
						<text>平均用时{{detInfo.useMinutes}}min</text>
					</view>
				</view> 
				<view class="cpMod">
					<view class="modTit">测评介绍</view>
					<view class="modCon">
						<rich-text :nodes="detInfo.xlcsProfile"></rich-text>
					</view>
				</view>
				<view class="cpMod" v-if="hasZdFlag == 1 && cpZdInfo != ''">
					<view class="modTit">指导语</view>
					<view class="modCon"><rich-text :nodes="cpZdInfo"></rich-text></view>
				</view>
				<view class="cpMod">
					<view class="modTit">注意事项</view>
					<view class="modCon"><rich-text :nodes="cpZyInfo"></rich-text></view>
				</view>
				<view class="cpMod">
					<view class="modTit">测评须知</view>
					<view class="modCon">
						<view>1.请认真测评,每道题的测评时间至少为1秒,如若做题过快,系统将判断本次测评无效。</view>
						<view class="spec">2.测评对象：{{ detInfo.groupDetail }}</view>
						<view class="spec">3.测评日期{{detInfo.sDate}}<text style="margin: 0 5rpx;">至</text>{{detInfo.eDate}}</view>
						<view class="spec" v-if="detInfo.reportTag == 1">4.本次测评支持查看测评报告</view>
						<view class="spec" v-if="detInfo.reportTag == 2">4.本次测评不支持查看测评报告</view>
						<view class="spec">5.本次测评暂不支持咨询师/服务工作者测试</view>
					</view>
				</view>
				<!-- -1没有权限测试 -3未开始 0未测试 大于0已完成测试 -->
				<template v-if="userId == ''">
					<button class="comBtn" @tap="goLogin">开始测试</button>
				</template>
				<template v-else>
					<template v-if="roleName == jmRoles">
						<button class="comBtn disBg" v-if="detInfo.logId == -1">暂无权限测试</button>
						<button class="comBtn disBg" v-if="detInfo.logId == -2">该测评已过期</button>
						<button class="comBtn disBg" v-if="detInfo.logId == -3">测评未开始</button>
						<button class="comBtn" v-if="detInfo.logId == 0 && currDate >= detInfo.sDate" @tap="goTest">开始测试</button>
						<button class="comBtn" v-if="detInfo.logId > 0 && detInfo.reportTag == 1" @tap="goViewReport">查看测评报告</button>
						<button class="comBtn disBg" v-if="detInfo.logId > 0 && detInfo.reportTag == 2">已完成测试</button>
					</template>
				</template>
			</view>
		</template>
		<template v-else>
			<view class="loadingWrap"><loading loadType="2"></loading></view>
		</template>
	</view>
</template>

<script>
	import { getZzCpDet } from '@/api/index/index'
	import getQue from '@/mixins/getQue.js'
	export default {
		data(){
			return{
				orderId:0.,
				detInfo:null,
				hasZdFlag:0,
				cpZyInfo:'',
				cpZdInfo:'',
				userId:'',
				isRefreshFlag:false,
				queList:[],
				roleName:'',
				jmRoles:this.jmRole,
				currDate:this.util.getNowTimeDay()
			}
		},
		mixins:[getQue],
		onLoad(option){
			this.roleName = uni.getStorageSync('roleName');
			this.orderId = option.orderId;
			this.userId = uni.getStorageSync('userIdZz');
			this.getDet();
			// if(userId != ''){
			// 	this.checkZzCp();
			// }
		},
		onShow(){
			if(this.isRefreshFlag){
				this.userId = uni.getStorageSync('userIdZz'); 
				this.getDet();
				//this.checkZzCp();
			}
		},
		onUnload(){
			uni.removeStorageSync('userCpInfo');
			uni.removeStorageSync('queList');
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		methods:{
			getDet(){
				let field = {orderId:this.orderId}
				getZzCpDet(field).then(res=>{
					this.detInfo = res.data.datas;
					var tmpInsArr = this.detInfo.xlcsInstruction.split('注意事项');
					if(tmpInsArr.length == 1){
						this.cpZyInfo = tmpInsArr[0];
					}else if(tmpInsArr.length == 2){
						this.hasZdFlag = 1;
						this.cpZyInfo = tmpInsArr[1];
						this.cpZdInfo = tmpInsArr[0];
					}
					if(this.detInfo.logId == 0){
						var field = { scaleId:this.detInfo.xlcsId,opt:'zzGroup' };
						this.loadTestQueList(field);
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/login?loginNum=1'
				})
			},
			goTest(){
				const { userName,userAge,userSex,id,title,scaleOwner } = this.detInfo;
				uni.navigateTo({
					url:'/pages/subIndex/selCpArea/selCpArea?userName=' + userName + '&userAge=' + userAge + '&userSex=' + userSex + '&orderId=' + id + '&cpTit=' + title + '&scaleOwner=' + scaleOwner
				})
			},
			goViewReport(){
				uni.navigateTo({
					url:'/pages/subIndex/cpReport/cpReport'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detImg{
		width: 686rpx;
		height: 416rpx;
		margin: 30rpx auto 0;
	}
	.cpTit{
		font-size: 36rpx;
		color: $pss-text-color0;
		font-weight: 600;
		margin: 30rpx 0 15rpx;
	}
	.scaleTit{
		font-size: 26rpx;
		color: $pss-text-color8;
	}
	.cpMod{
		margin-top: 30rpx;
		.modTit{
			font-size: 30rpx;
			color: $pss-text-color0;
			font-weight: 600;
			margin-bottom: 15rpx;
		}
		.modCon{
			font-size: 28rpx;
			color: $pss-text-color8;
			line-height: 40rpx;
			margin: 0 1em;
			.spec{
				color: $pss-color-red;
				margin-top: 8rpx;
			}
		}
	}
	.comBtn{
		background: $pss-color-blueDeep;
		margin:40rpx 0 0;
		font-size: 30rpx;
		&.disBg{
			background: #ccc;
		}
	}
	.scaleDet{
		align-items: center;
		margin-top: 15rpx;
		.cpNum{
			font-size: 24rpx;
			color: $pss-text-color8;
			display: flex;
			align-items: center;
			.iconfont{
				font-size: 32rpx;
				margin-right: 10rpx;
				color: $pss-color-blueDeep;
			}
		}
		.lineView{
			width: 5rpx;
			height: 22rpx;
			background: #ccc;
			margin: 0 30rpx;
		}
	}
</style>